import React from 'react';
import styles from './myPoint.css';


const myPoint = ({
  onSelected=()=>{},
  onbillNav=()=>{},
  selectedIndex=0,
  billNavIndex=0
}) => {

  const WalletData = [
    {
      title: '我的钱包',
      balance: 199.00,
      incomes: [
        {
          title: '兼职工资',
          number: 80,
          date: '2017-03-02'
        },{
          title: '兼职工资',
          number: 82,
          date: '2017-03-04'
        },{
          title: '兼职工资',
          number: 83,
          date: '2017-03-05'
        },{
          title: '兼职工资',
          number: 80,
          date: '2017-03-02'
        },{
          title: '兼职工资',
          number: 82,
          date: '2017-03-04'
        },{
          title: '兼职工资',
          number: 83,
          date: '2017-03-05'
        },{
          title: '兼职工资',
          number: 80,
          date: '2017-03-02'
        },{
          title: '兼职工资',
          number: 82,
          date: '2017-03-04'
        },{
          title: '兼职工资',
          number: 83,
          date: '2017-03-05'
        },{
          title: '兼职工资',
          number: 80,
          date: '2017-03-02'
        },{
          title: '兼职工资',
          number: 82,
          date: '2017-03-04'
        },{
          title: '兼职工资',
          number: 83,
          date: '2017-03-05'
        }
      ],
      expends: [
        {
          title: '提现',
          number: 80,
          date: '2013-03-02'
        },{
          title: '购物',
          number: 82,
          date: '2015-03-04'
        },{
          title: '提现',
          number: 83,
          date: '2016-03-05'
        }
      ]
    },
    {
      title: '我的积分',
      balance: 120,
      incomes: [
        {
          title: '兼职工资',
          number: 30,
          date: '2017-03-02'
        },{
          title: '兼职工资',
          number: 32,
          date: '2017-03-04'
        },{
          title: '兼职工资',
          number: 33,
          date: '2017-03-05'
        }
      ],
      expends: [
        {
          title: '兑换礼物',
          money: 80,
          date: '2013-03-02'
        },{
          title: '购物',
          money: 82,
          date: '2015-03-04'
        },{
          title: '兑换礼物',
          money: 83,
          date: '2016-03-05'
        }
      ]
    }
  ]

  const Arr = billNavIndex==0?WalletData[selectedIndex].incomes:WalletData[selectedIndex].expends

  return(
    <div className={styles.container}>
      <div className={styles.tabsNavBody}>
        {WalletData.map((item,index) =>{
          let itemClass = [`${styles.tabItem}`,`${styles.textColor}`];
          if(selectedIndex == index){
            itemClass.length = 0;
            itemClass.push(`${styles.tabItem}`)
            itemClass.push(`${styles.textColorSelected}`)
          }
          return (
            <div key={index.toString()}
              className={itemClass.join(' ')}
              onClick={() => onSelected(index)}>
              <span>{item.title}</span>

            </div>
          )
        })}
      </div>

      <div className={styles.content}>
        <div className={styles.topView}>
          { selectedIndex==0 ? (
            <div className={styles.titleLink}>当前余额</div>
          ):(<div className={styles.titleLink}>当前积分</div>)}
          <div className={styles.balance}> { WalletData[selectedIndex].balance }</div>
          { selectedIndex==0 ? (
            <div className={styles.kiting}>提现</div>
          ):''}
        </div>
        <div className={styles.bill}>
          <div className={styles.billNav}>
            <div className={billNavIndex==0? styles.billNavItemSel: styles.billNavItem} onClick={() => onbillNav(0)}>收入明细 </div>
            <div className={billNavIndex==1? styles.billNavItemSel: styles.billNavItem} onClick={() => onbillNav(1)}>支出明细 </div>
          </div>
          <div className={styles.billList}>
            { Arr.map((item,index) => {

              return(

                <div key={index.toString()} className={styles.billItem} >
                  <div className={styles.billItemLeft}>
                    <div className={styles.billItemTitle}>
                      {item.title}
                    </div>
                    <div className={styles.billItemDate}>
                      {item.date}
                    </div>
                  </div>
                  <div className={styles.billItemRight}>
                    {item.number}
                  </div>
                </div>
              )


            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default myPoint;
